"use client"
import { EditOutlined } from "@ant-design/icons";
import { useState } from "react";

const EditMenuList: React.FC<{  onItemClick: (item: any) => void; menuPosition: { x: number; y: number },noteObj:any }> = ({ onItemClick, menuPosition,noteObj }) => {
    const List = [
    {
      icon: <EditOutlined />,
      key: 'edit',
      label: '编辑便签',
    },
    {
      key: 'finish',
      label: `${noteObj.status==1?'撤销完成':'完成'}`,
      Divider: true,
    },
    {
      key: 'editReminder',
      label: '修改提醒',
    },
    {
      key: 'deleteReminder',
      label: '清除提醒',
      Divider: true,
    },
    {
      key: 'delete',
      label: '删除本条',
    },
    {
      key: 'copy',
      label: '复制本条',
    },
    {
      key: 'timeline',
      label: '时间轴',
      Divider: true,
    },
    {
      key: 'move',
      label: '移动',
    },
    {
      key: 'PinToTop',
      label: `${noteObj.priority==1?'置顶':'取消置顶'}`,
    }
  ];
 const handleMenuClick = (item: any,e: React.MouseEvent) => {
    e.stopPropagation(); // 阻止事件冒泡
    e.preventDefault(); // 阻止默认行为
    onItemClick(item);
  }

    return (
        <div className="z-50 fixed" style={{
            left: `${menuPosition.x}px`,
            top: `${menuPosition.y}px`
        }}>
            <div>{List.map(item => (
                <div onClick={(e)=> handleMenuClick(item,e)} className="bg-white cursor-pointer select-none" key={item.key}>
                    <div className="flex items-center pt-2 pb-2 pl-5 pr-5 hover:bg-gray-200  text-[#323232]">
                        <div className="w-4">{item.icon}</div>
                        <div className="ml-2">{item.label}</div>

                    </div>
                    {item.Divider && <div className="bg-[#e3e4e6] w-full h-px mx-auto"></div>}
                </div>

            ))}</div>
        </div>
    );
};

export default EditMenuList;
